<template>
<div class="fluid field myfield">
  <label :class="{must: field.is_must}">{{field.title}}</label>
  <!-- <p class='ui text' v-if='$store.state.isDetail'>{{val}}</p> -->
  <div class="ui ignored info attached message" v-if='$store.state.isDetail'>
    <p>{{val}}</p>
  </div>
  <date-picker v-else :date="startTime" :option="option" :limit="limit"></date-picker>

</div>
</template>

<script>
import tool from 'src/util/tool';
//import myDatepicker from 'vue-datepicker'
import myDatepicker from 'components/common/vue-datepicker'

export default {
  data() {
    return {
      val: '',
      startTime: {
        time: ''
      },
      limit: [{
          type: 'weekday',
          available: [1, 2, 3, 4, 5]
        },
        {
          type: 'fromto',
          from: '2010-02-01',
          to: '2026-02-20'
        }
      ],
      option: {
        type: 'day',
        //          week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        week: ['一', '二', '三', '四', '五', '六', '日'],
        //          month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        format: 'YYYY-MM-DD',
        placeholder: '请选择日期',
        inputStyle: {},
        color: {
          header: 'rgba(0, 0, 0, 0.75)',
          headerText: 'rgba(255, 255, 255, .9)'
        },
        buttons: {
          ok: '确定',
          cancel: '取消'
        },
        overlayOpacity: 0.5, // 0.5 as default
        dismissible: true // as true as default
      },
      map: {}
    }
  },
  components: {
    'date-picker': myDatepicker
  },
  methods: {},
  watch: {
    'startTime.time': function(val, old) {
      if (val != old) {
        this.val = val
      }
    },
    val: function(val, old) {
      if (val != old) {
        this.$emit('setVo', this.field.name, val)
      }
    }
  },
  computed: {
    placeholder() {
      return `请输入${this.field.title}`
    },
  },
  props: ['field'],
  created() {
    this.val=this.field.fval
    this.startTime = {
      time: this.val
    };
  },
  mounted() {

  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.fluid.field {
    .datepickbox {
        input {
            display: inline-block;
            vertical-align: top;
            padding: 1px 8px;
            line-height: 19px;
            font-size: 13px;
            border: 2px solid rgba(0, 0, 0, 0.2);
            /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);*/
            border-radius: 3px;
            color: #5F5F5F;
            cursor: pointer;
        }
    }
    .datepicker-overlay {
        .cov-date-body {
            .cov-date-caption {}
        }
    }
}
</style>
